<template>
  <div class="content-card">
    <div class="title">
      <a-icon type="tags"></a-icon>
      <span>{{ "数据类型占比" }}</span>
    </div>
    <div class="body">
      <div id="overview-backup__chart1" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<script>
export default {
  name: "o4-chart",
  props: {},
  data() {
    return {};
  },
  mounted() {
    this.registerAndSetCharts1();
  },
  methods: {
    registerAndSetCharts1() {
      let charts1Ref = this.$echarts.init(
        document.getElementById("overview-backup__chart1")
      );
      let option1 = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          bottom: "10%",
        },
        series: [
          {
            name: "数据类型占比",
            type: "pie",
            radius: "50%",
            top: "-10%",
            data: [
              { value: 33, name: "文件" },
              { value: 3, name: "接口" },
              { value: 35, name: "库表" },
              { value: 26, name: "文件夹" }

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      charts1Ref.setOption(option1);
    },
  },
};
</script>

<style lang="less" scoped>
.content-card {
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    i {
      color: #6989c6;
      margin: 0 15px;
      font-size: 18px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
  .body {
    width: 100%;
    height: 300px;
  }
}
</style>
